<!--  -->
<template>
  <el-row :gutter="50">
    <el-col class="col-item" v-for="item in list" :key="item.id" :span="6">
      <el-card class="box-card">
        <el-image
          style="width: 100%; height: 190px"
          fit="fit"
          :src="item.avatar"
        />
        <h5>{{ item.title }}</h5>
        <p class="desc">{{ item.description }}</p>
        <p class="link"><el-link type="primary">进入专栏</el-link></p>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
export interface ColumnProps {
  id: number
  title: string
  avatar?: string
  description: string
}
export default defineComponent({
  name: '',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true
    },
    colors: {
      type: Array,
      default: () => {
        return ['green', 'blue', 'yellow', 'lieght-blue']
      }
    }
  }
})
</script>
<style lang="scss" scoped>
@import '@/assets/styles/mixins.scss';
.el-col {
  margin-bottom: 20px;
}
.el-card {
  .el-image {
    min-height: 190px;
  }
  p {
    height: 63px;
    @include ellipsisBasic(3);
  }
  p.link {
    margin: 0;
    height: 28px;
    text-align: center;
  }
}
</style>
